<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery.min.js"></script>
    <style>
        .descendants *
        {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>
<!--
后代是子、孙、曾孙等等。
通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。
向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法：
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代
-->


<div class="descendants" style="width:500px;">div (当前元素)
    <p>p (儿子元素)
        <span>span (孙子元素)</span>
    </p>
    <p>p (儿子元素)
        <span id="sp2">span (孙子元素)</span>
    </p>
</div>

<script>

    $(function () {
        // $('.descendants').children().css({"color": "red", "border": "2px solid red"})
        // $('.descendants').find("span").css({"color": "red", "border": "2px solid red"})
        $('.descendants').find("*").css({"color": "red", "border": "2px solid red"})
        // $('.descendants').find("#sp2").css({"color": "red", "border": "2px solid red"})
    })
</script>

</body>
</html>